<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="left">
        <a class="link back">
          <i class="icon icon-back"></i>

        </a>
      </div>
      <div class="title">Grid / Layout</div>
    </div>
  </div>
  <div class="page-content grid-demo">
    <div class="block">
      <p>Columns within a row are automatically set to have equal width. Otherwise you can define your column with
        pourcentage of screen you want.</p>
    </div>
    <div class="block-title">Columns with gap</div>
    <div class="block">
      <div class="grid grid-cols-2 grid-gap">
        <div>2 cols</div>
        <div>2 cols</div>
      </div>
      <div class="grid grid-cols-4 grid-gap">
        <div>4 cols</div>
        <div>4 cols</div>
        <div>4 cols</div>
        <div>4 cols</div>
      </div>
      <div class="grid grid-cols-3 grid-gap">
        <div>3 cols</div>
        <div>3 cols</div>
        <div>3 cols</div>
      </div>
      <div class="grid grid-cols-5 grid-gap">
        <div>5 cols</div>
        <div>5 cols</div>
        <div>5 cols</div>
        <div>5 cols</div>
        <div>5 cols</div>
      </div>
    </div>
    <div class="block-title">No gap between columns</div>
    <div class="block">
      <div class="grid grid-cols-2">
        <div>2 cols</div>
        <div>2 cols</div>
      </div>
      <div class="grid grid-cols-4">
        <div>4 cols</div>
        <div>4 cols</div>
        <div>4 cols</div>
        <div>4 cols</div>
      </div>
      <div class="grid grid-cols-3">
        <div>3 cols</div>
        <div>3 cols</div>
        <div>3 cols</div>
      </div>
      <div class="grid grid-cols-5">
        <div>5 cols</div>
        <div>5 cols</div>
        <div>5 cols</div>
        <div>5 cols</div>
        <div>5 cols</div>
      </div>
    </div>

    <div class="block-title">Responsive Grid</div>
    <div class="block">
      <p>Grid cells have different size on Phone/Tablet</p>
      <div class="grid grid-cols-1 medium-grid-cols-2 grid-gap">
        <div>1 col / medium 2 cols</div>
        <div>1 col / medium 2 cols</div>
      </div>
      <div class="grid grid-cols-2 medium-grid-cols-4 grid-gap">
        <div>2 col / medium 4 cols</div>
        <div>2 col / medium 4 cols</div>
        <div>2 col / medium 4 cols</div>
        <div>2 col / medium 4 cols</div>
      </div>
    </div>

  </div>
</div>
